@charset "UTF-8";
@import "../../common/css/base/base.scss";

/* 添加横屏提示组件 */
@import "../../common/css/landscape/style.scss";

@import "./loading/style.scss";

$red: #fc2441;
body {
	overflow: hidden;
	font-size: 30px;
	background-color: #FFF;
}

.audio {
	padding: 22px;
	position: absolute;
	top: 30px;
	right: 10px;
	z-index: 99;
	width: 64px;
	height: 26px;
    i {
        margin-right: 6px;
        display: inline-block;
        width: 8px;
        height: 24px;
        background-color: #FFF;

        &:nth-child(odd) {
            animation: music-ani 1.2s 0.6s ease-in-out infinite;
        }
        &:nth-child(even) {
            // height: 30px;
            animation: music1-ani 1.2s ease-in-out infinite;
        }

    }
}

.audio-r {
    .audio {
        i {
            background-color: $red;
        }
    }
}

.audio-off {
    .audio {
        i {
            &:nth-child(odd) {
                animation: none;
            }
            &:nth-child(even) {
                animation: none;
            }
        }
    }
}


@keyframes music-ani {
	0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(2px);
    }
    75% {
        transform: translateY(-2px);
    }
}
@keyframes music1-ani {
	0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(2px);
    }
    75% {
        transform: translateY(-2px);
    }
}

/* 箭头 */

.arrow {
	display: block;
	width: 42px;
	height: 18px;
	position: absolute;
	bottom: 48px;
	left: 50%;
	margin-left: -21px;
	z-index: 99;
	// transform: rotate(45deg);
	animation: arrow-ani 3s infinite;
}

.arrow-w {
	background-image: url(../img/icon/arrow_w.png);
}

.arrow-r {
	background-image: url(../img/icon/arrow_r.png);
}

@keyframes arrow-ani {
	0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
	40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* share mask*/

// .share_mask {
// 	-webkit-user-select: none;
// 	user-select: none;
// 	z-index: 1000;
// 	position: fixed;
// 	left: 0;
// 	top: 0;
// 	bottom: 0;
// 	right: 0;
// 	background-color: rgba(0, 0, 0, 0.9);
// 	.ani-arrow {
// 		background-image: url('.icon/./img/icon/share.png');
// 		width: 182px;
// 		height: 247px;
// 		position: absolute;
// 		right: 50px;
// 		top: 70px;
// 		animation: arrowAni 1.2s infinite ease-in-out;
// 	}
// 	em {
// 		font-size: 28px;
// 		position: absolute;
// 		width: 300px;
// 		height: 100px;
// 		right: 100px;
// 		top: 70px;
// 		text-align: center;
// 		color: #ccc;
// 	}
// }

// @keyframes arrowAni {
// 	0% {
// 		transform: translate3d(0, 0, 0) rotate(0deg);
// 	}
// 	50% {
// 		transform: translate3d(10px, -50px, 0) rotate(-10deg);
// 	}
// 	100% {
// 		transform: translate3d(0, 0, 0) rotate(0deg);
// 	}
// }


/* page */

.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	overflow: hidden;
    // visibility: hidden;
    // display: none;
    .page {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

    &.swiper-slide-active,&.swiper-slide-next,&.swiper-slide-prev{
    // &.swiper-slide-active{
        // visibility: visible;
        .page {
            display: block;
        }
    }
}

.home {
	background-color: $red;
	&>div>div {
		position: absolute;
		background-repeat: no-repeat;
	}
	&-1 {
		top: 44px;
		left: 50px;
		width: 293px;
		height: 206px;
		background-image: url(../img/icon/home-1.png);
	}
	&-2 {
		left: 50px;
		bottom: 50px;
		width: 205px;
		height: 117px;
		background-image: url(../img/icon/home-2.png);
	}
	&-3 {
		right: 50px;
		bottom: 50px;
		width: 82px;
		height: 127px;
		background-image: url(../img/icon/home-3.png);
	}
	&-4 {
		top: 50%;
		left: 50%;
		width: 460px;
		height: 460px;
		margin-left: -230px;
		margin-top: -230px;
		background-image: url(../img/icon/bubble-w.png);
		transform: scale(4);
	}
	&-txt {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 210px;
		height: 220px;
		margin-left: -105px;
		margin-top: -110px;
		transform: scale(0);
	}
}

@mixin moveAndFadeAnimation($distance, $duration, $delay) {
  
  animation: move-and-fade $duration linear infinite;
  animation-delay: $delay;
  
  @keyframes move-and-fade {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    50% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    100% {
      transform: translateY(-$distance);
      opacity: 0;
    }
  }
}

.meet {
	background-color: $red;
	&>div>div,
	&>div>div>div {
		background-repeat: no-repeat;
	}
	&-1 {
		margin: 196px auto 0;
		width: 412px;
		height: 124px;
		background-image: url(../img/icon/meet-1.png);
	}
	&-2 {
		position: absolute;
		left: 50px;
		bottom: 60px;
		width: 18px;
		height: 195px;
		background-image: url(../img/icon/meet-2.png);
	}
	.meet-bubble {
		margin: 120px auto 0;
		padding: 1px;
		width: 533px;
		height: 533px;
		background-image: url(../img/icon/bubble-w.png);
	}
    &-pic {
		position: absolute;
		top: 489px;
		left: 50%;
		margin-left: -30.5px;
		width: 61px;
		height: 46px;
        z-index: 10px;
        i {
            position: absolute;
            display: inline-block;
            width: 8px;
            opacity: 0;
            // height: 20px;
            // background-color: $red;
        }

        &.air-active {
            i {
                // opacity: 1;
                &:nth-child(1) {
                    left: 18px;
                    top: -20px;
                    @include moveAndFadeAnimation(10px, 2.5s, .7s)
                }
                &:nth-child(2) {
                    left: 32px;
                    top: -24px;
                    @include moveAndFadeAnimation(20px, 2.5s, 1s)
                }
                &:nth-child(3) {
                    left: 48px;
                    top: -18px;
                    @include moveAndFadeAnimation(15px, 2.5s, .9s)
                }
            }
        }
    }
	&-coffee {
		// margin: 82px auto 0;
		// position: absolute;
		// top: 489px;
		// left: 50%;
		// margin-left: -30.5px;
		width: 61px;
		height: 46px;
	}
	&-txt-1 {
		// margin: 58px auto 0;
		position: absolute;
		top: 590px;
		left: 50%;
		margin-left: -185.5px;
		width: 371px;
		height: 228px;
	}
	&-txt-2 {
		// margin: 58px auto 0;
		position: absolute;
		top: 590px;
		// top: 1377px;
		left: 50%;
		margin-left: -166px;
		width: 332px;
		height: 178px;
		// transform: scale(0);
	}
}


.meet1 {
	.meet-bubble {
		transform: scale(3.8);
	}
	.meet-coffee {
		transform: scale(0);
	}
	.meet-txt-1 {
		transform: scale(0);
	}
}

.city {
	background-color: #FFF;
	&>div>div {
		background-repeat: no-repeat;
	}
	&-1 {
		margin: 76px auto 0;
		width: 370px;
		height: 131px;
		background-image: url(../img/city-1.jpg);
		background-size: 100% 100%;
	}
	&-map {
		margin: 106px auto 0;
		width: 750px;
		height: 654px;
		background-image: url(../img/city-map.jpg);
		background-size: 100% 100%;
		position: relative;
		span {
			font-size: 28px;
			color: #000;
			position: absolute;
			.red-dot-flash {
				content: " ";
				display: inline-block;
				position: absolute;
				top: 36px;
				left: 50%;
				margin-left: -21px;
				width: 42px;
				height: 42px;
				background-color: #ff1e3b;
				border-radius: 100%;
				opacity: 0.5;
				// animation: flash-ani 3s infinite ease;
			}
			&:after {
				content: " ";
				display: inline-block;
				position: absolute;
				top: 40px;
				left: 50%;
				margin-left: -11.5px;
				width: 23px;
				height: 30px;
				background-repeat: no-repeat;
	
				background-image: url(../img/icon/city-red-dot.png);
			}
			&:nth-child(1) {
				top: 14px;
				right: 110px;
			}
			&:nth-child(2) {
				top: 66px;
				right: 171px;
			}
			&:nth-child(3) {
				top: 94px;
				right: 252px;
			}
			&:nth-child(4) {
				top: 162px;
				right: 172px;
			}
			&:nth-child(5) {
				top: 252px;
				right: 128px;
			}
			&:nth-child(6) {
				top: 265px;
				right: 32px;
			}
			&:nth-child(7) {
				top: 364px;
				right: 26px;
			}
			&:nth-child(8) {
				top: 427px;
				right: 148px;
			}
			&:nth-child(9) {
				top: 484px;
				right: 198px;
			}
			&:nth-child(10) {
				top: 451px;
				right: 251px;
			}
			&:nth-child(11) {
				top: 329px;
				right: 238px;
			}
			&:nth-child(12) {
				top: 211px;
				right: 305px;
			}
			&:nth-child(13) {
				top: 237px;
				right: 427px;
			}
			&:nth-child(14) {
				top: 198px;
				right: 567px;
			}
			&:nth-child(15) {
				top: 300px;
				right: 633px;
			}
			&:nth-child(16) {
				top: 417px;
				right: 638px;
			}
		}
	}
	&-2 {
		position: absolute;
		left: 72px;
		bottom: 50px;
		width: 15px;
		height: 255px;
		background-image: url(../img/city-2.jpg);
		background-size: 100% 100%;
        z-index: 2;
	}
}

.city.swiper-slide-active {
    span {
        @for $i from 1 through 16 {
            &:nth-child(#{$i}) {
                .red-dot-flash{
                    animation: flash-ani 2s ($i%5)*0.5s infinite ease;
                }
            }
        }
    }
}


.gift {
	background-color: #FFF;
	&>div>div {
		background-repeat: no-repeat;
	}
	&-1 {
		margin: 102px auto 0;
		width: 467px;
		height: 909px;
		background-image: url(../img/gift-1.jpg);
		background-size:100% 100%;
	}
	&-2 {
		position: absolute;
		left: 80px;
		bottom: 68px;
		width: 14px;
		height: 135px;
		background-image: url(../img/gift-2.jpg);
		background-size:100% 100%;
	}
}

.flow {
	background-color: #FFF;
	&>div>div {
		background-repeat: no-repeat;
	}
    &>div>img {
        display: block;
    }
	&-1 {
		margin: 106px auto 0;
		width: 318px;
		height: 69px;
		background-image: url(../img/flow-1.jpg);
		background-size:100% 100%;
	}
	&-2 {
		position: absolute;
		left: 50px;
		bottom: 50px;
		width: 15px;
		height: 195px;
		background-image: url(../img/flow-2.jpg);
		background-size:100% 100%;
	}
	&-pic {
		margin: 86px auto 0;
		width: 153px;
		height: 54px;
		background-image: url(../img/flow-3.jpg);
		background-size:100% 100%;
	}
	&-step {
		&-1 {
			margin: 68px auto 0;
			width: 288px;
			height: 68px;
			// background-image: url(../img/flow-step-1.jpg);
		}
		&-2 {
			margin: 40px auto 0;
			width: 237px;
			height: 72px;
			// background-image: url(../img/flow-step-2.jpg);
		}
		&-3 {
			margin: 40px auto 0;
			width: 361px;
			height: 74px;
			// background-image: url(../img/flow-step-3.jpg);
		}
		&-line {
			width: 2PX;
			height: 68px;
			background-image: url(../img/flow-step-line.jpg);
		}
		&.line-1 {
			margin: 44px auto 0;
		}
		&.line-2 {
			margin: 44px auto 0;
		}
	}
	&-btn {
        display: block;
		margin: 110px auto 0;
		width: 318px;
		height: 70px;
		background-image: url(../img/flow-btn.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
}

.flow.swiper-slide-active {
	.flow-pic {
		animation: bounceIn 1s ease; 
	}
	.flow-step-1 {
		animation: move1-ani 1s 1s ease both;
	}
    .line-1 {
		animation: move1-ani 1s 1.5s ease both;
    }
    .flow-step-2 {
		animation: move1-ani 1s 2s ease both;
    } 
    .line-2 {
		animation: move1-ani 1s 2.5s ease both;
    }
    .flow-step-3 {
		animation: move1-ani 1s 3s ease both;
    }
    .flow-btn {
        animation: move1-ani 1s 3s ease both;
    }
}

@keyframes flash-ani {
	0% {
		opacity: 0.5;
		transform: scale(1, 1);
	}
	50% {
		opacity: 0.1;
		transform: scale(.8, .8);
	}
	100% {
		opacity: 0.5;
		transform: scale(1, 1);
	}
}

@keyframes move1-ani {
	0% {
		opacity: 0;
        transform: translateY(1334px);
	}
	100% {
		opacity: 1;
        transform: translateY(0%);
	}
}
